<template>
    <div :class="{ list1: true, down: tabName }" @mouseleave="closePop">
        <div :class="{ cont: tabName, fgkj: tabName == 'fgkj', fwzc: tabName == 'fwzc', gywm: tabName == 'gywm' }">
            <div class="tab" :ref="tabName" :style="{ transform: `translateX(${offsetX}px)` }">
                <div @mouseenter="handleMouseEnter(i.name)" @mouseleave="handleMouseLeave" v-for="i in list"
                    :key="i.name">
                    <div :class="{ active: activeName == i.name }">
                        <span  v-if="tabName == 'ddsl' || tabName == 'ddsh'">{{ i.name }}</span>
                        <a  v-else @click="e => goPage(i.path, tabName, i.id, e)" :href="getHref({ path: i.path?i.path:'/show',query:{id:(tabName=='fgkj' || tabName=='fwzc')?i.id:0,op:tabName=='fgkj'?2:tabName=='fwzc'?6:tabName=='gywm'?i.path=='/show?id=0&op=4'?4:7:'' }})">{{ i.name }}</a>
                    </div>
                </div>
            </div>
            <div class="des" v-if="tabName == 'ddsl' || tabName == 'ddsh'">
                <div v-show="activeName == i.name" class="txt" v-for="i in list" :key="i.name">{{ i.intro }}</div>
                <a :href="getHref({ path: '/types' })" v-if="tabName == 'ddsl'" class="all" @click="e => goType('/types', e)">
                    <img src="@/assets/img/s.png" alt="">
                    <span>全部车型</span>
                </a>
            </div>
            <div ref="carlist" :class="{ carlist: true, cont: tabName == 'ddsl' }"
                :style="{ height: tabName == 'ddsl' ? height : 0 }">
                <div class="car" v-show="i.name == activeName" v-for="i in ddsl" :key="i.name">
                    <div v-for="a in i.list" :key="a.id">
                        <span>{{ a.line_name }}</span>
                        <a :href="getHref({ path: '/show', query: { id: item.id, op: 3 } })" class="carinfo carinfo2"
                            v-for="(item, d) in a.products" :key="d" @click="event => goShow('/show', item.id, 3, event)">
                            <div class="lImg" target="_blank">
                                <img v-if="i.name == activeName || getImg.includes(i.name)" :src="item.img" alt="" />
                            </div>
                            <span>{{ item.name }}</span>
                        </a>
                    </div>
                </div>
            </div>
            <div ref="carlist2" v-show="tabName == 'ddsh'" :class="{ carlist: true, cont: tabName == 'ddsh' }"
                :style="{ height: tabName == 'ddsh' ? height : 0 }">
                <div class="car" v-show="i.name == activeName" v-for="i in ddsh" :key="i.name">
                    <div v-for="a in i.list" :key="a.id">
                        <span>{{ a.line_name }}</span>
                        <a :href="getHref({ path: '/show', query: { id: item.id, op: 3 } })" class="carinfo carinfo2"
                            v-for="(item, d) in a.products" :key="d" @click="event => goShow('/show', item.id, 3, event)">
                            <div class="lImg" target="_blank">
                                <img v-if="i.name == activeName || getImg.includes(i.name)" :src="item.img" alt="" />
                            </div>
                            <span>{{ item.name }}</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div
            :class="{ cont: tabName && tabName!='ddsl', }">
            <div class="tab">
                <div @mouseenter="getName(i.name)" @click="goPage(i.path)" v-for="i in list" :key="i.name">
                    <div :class="{ active: activeName == i.name }">{{ i.name }}</div>
                </div>
            </div>
        </div> -->

    </div>
</template>

<script>
// import ImgSwitch from './ImgSwitch.vue'
export default {
    name: 'headerMenu',
    components: {
        // ImgSwitch,
    },
    data() {
        return {
            activeName: '',
            offsetX: '',
            list: '',
            hoverTimer: null,
            getImg: [],
            hoverDelay: 200 // 200ms后触发，根据需要调整
        }
    },
    props: {
        tabName: {
            type: String
        },
    },
    computed: {
        height() {
            let list2 = []
            if (this.list && this.activeName) {
                this.list.forEach(i => {
                    if (i.name == this.activeName) {
                        list2 = i
                    }
                })
                if (list2.list) {
                    let num = 0
                    list2.list.forEach(a => {
                        num += a.products.length
                    })
                    if (Math.ceil(list2.list.length) * 13 > 26.6 || num > 5) {
                        return 26.6 + 'vw'
                    } else {
                        return Math.ceil(list2.list.length) * 13.3 + 'vw'
                    }

                } else {
                    return 0
                }
            } else {
                return 0
            }

        },
        ddsl() {
            return this.$store.state.menuList.ddsl
        },
        ddsh() {
            return this.$store.state.menuList.ddsh
        },
        fgkj() {
            return this.$store.state.menuList.fgkj
        },
        fwzc() {
            return this.$store.state.menuList.fwzc
        },
        gywm() {
            return this.$store.state.menuList.gywm
        },
    },
    watch: {
        tabName(n) {
            if (n) {
                this.list = this[n]
                if (n == 'ddsl' || n == 'ddsh') {
                    this.activeName = this.list[0].name
                    this.offsetX = 0
                } else {
                    this.$nextTick(() => {
                        const namesWidth = this.$refs[n].offsetWidth;
                        let padding = window.innerWidth * 350 / 1920
                        this.offsetX = this.$store.state.offset[n].left + (this.$store.state.offset[n].width / 2) - (namesWidth / 2) - padding;
                    })

                }

            }
        },
        activeName: {
            immediate: true,
            handler(n) {
                if (this.$refs.carlist) {
                    this.$refs.carlist.scrollTop = 0;
                }
                if (this.$refs.carlist2) {
                    this.$refs.carlist2.scrollTop = 0;
                }
                if (!this.getImg.includes(n) && n) {
                    this.getImg.push(n)


                }
            }
        }
    },
    mounted() {
    },
    methods: {

        goShow(url, id, op, e) {
            e.preventDefault();
            window.scrollTo({
                top: 0,
                behavior: 'smooth' // 平滑滚动
            });
            if (url) {
                this.$router.push({
                    path: url,
                    query: {
                        id, op
                    }
                })
                this.$emit('close')
            }
        },

        goType(url, e) {
            e.preventDefault()
            this.$router.push(url)
            this.$emit('close')
        },
        goPage(url, name, id, e) {
            e.preventDefault()
            window.scrollTo({
                top: 0,
                behavior: 'smooth' // 平滑滚动
            });
            if (url == this.$route.path) {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth' // 平滑滚动
                });
            }

            if (name == 'ddsl' || name == 'ddsh') return
            // 富贵科技
            if (name == 'fgkj') {
                this.$router.push({
                    path: '/show',
                    query: {
                        id, op: 2
                    }
                })
                this.$emit('close')
                return
            }

            // // 服务支持
            if (name == 'fwzc') {
                if (url == '/afterSale' || url == '/guide') {
                    this.$router.push(url)
                    this.$emit('close')
                } else {
                    this.$router.push({
                        path: '/show',
                        query: {
                            id, op: 6
                        }
                    })
                    this.$emit('close')
                    return
                }
            }

            if (name == 'gywm') {
                if (url == '/show?id=0&op=4' || url == '/news' || url == '/contactUs' || url == '/jobIndex') {
                    this.$router.push(url)
                    this.$emit('close')
                } else {
                    this.$router.push({
                        path: '/show',
                        query: {
                            id, op: 7
                        }
                    })
                    this.$emit('close')
                    return
                }
            }

            // this.$router.push(url)
            // this.$emit('close')

        },
        handleMouseEnter(name) {
            // 清除之前的定时器（防止快速悬停多次触发）
            if (this.hoverTimer) clearTimeout(this.hoverTimer)

            // 设置新的定时器
            this.hoverTimer = setTimeout(() => {
                this.getName(name)
            }, this.hoverDelay)
        },
        handleMouseLeave() {
            // 鼠标离开时清除定时器（防止未达到时间就离开仍然触发）
            if (this.hoverTimer) {
                clearTimeout(this.hoverTimer)
                this.hoverTimer = null
            }
        },
        getName(name) {

            this.activeName = name
        },
        getHref(route) {
            const resolved = this.$router.resolve(route);
            return resolved.href;
        },

        closePop() {
            this.list = []
            this.activeName = ''
            this.$emit('close')
        }
    }
}
</script>

<style lang="scss" scoped>
.list1 {
    width: 100vw;
    position: fixed;
    top: 72px;
    max-height: 0;
    left: 0;
    padding: 0 350px 0px;
    background: #fff;
    z-index: 98;
    transition: all 0.5s;
    overflow: hidden;
    opacity: 0;

    >div {
        opacity: 0;
        max-height: 0;
        transition: max-height 0.5s ease, opacity 0.5s ease;
    }
}

.down {
    max-height: 1500px;
    opacity: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    .cont {
        opacity: 1;
        max-height: 1500px;
        overflow-y: auto;

        &::-webkit-scrollbar {
            width: 0 !important;
        }

    }
}

.tab {
    display: inline-flex;
    align-items: center;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    padding: 20px 0;
    transition: none;

    >div {
        white-space: nowrap;
        margin: 0 32px 0 0;
        cursor: pointer;

        >div {
            padding: 5px 13px;

        }

        a {
            text-decoration: none;
            color: #000000;
        }

        .active {
            border-radius: 15px;
            background-color: #f5f3f3;

            a,span {
                color: #B00D16 !important;
            }
        }
    }
}

.des {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;

    .txt {
        font-weight: 400;
        font-size: 16px;
        color: #757575;
    }

    .all {
        cursor: pointer;
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 16px;
        color: #B00D16;
        text-decoration: none;

        img {
            width: 21px;
            height: 21px;
            margin-right: 6px;
        }
    }
}



.carlist {

    overflow-y: auto;

    .car>div {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 50px;
        padding-bottom: 20px;

        >span {
            display: block;
            font-weight: bold;
            font-size: 16px;
            color: #000000;
            width: 100%;
            margin-bottom: 10px;
            line-height: 20px;
            min-height: 20px;
        }

        .carinfo {
            cursor: pointer;
            margin-bottom: 40px;
            width: 200px;
            height: 200px;
            padding: 0 15px 10px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            font-weight: 400;
            font-size: 17px;
            color: #010202;
            border-radius: 10px;
            text-decoration: none;

            &:hover {
                background-color: #f1f1f1;
            }

            img {
                width: 200px;
                height: 200px;
            }

            span {
                margin-top: 10px;
            }
        }

        .carinfo2 {
            .lImg {
                width: 200px;
                height: 160px;
                display: flex;
                align-items: center;
                justify-content: center;

                ::v-deep img {
                    height: 140px;
                    max-width: 200px;
                    width: auto;
                    object-fit: contain;
                }

            }

            // img {
            //     height: 160px;
            //     max-width: 170px;
            //     width: auto;
            // }
        }
    }
}

.ddsh {
    .tab {
        transform: translateX(200px);

    }
}

.fgkj {
    .tab {
        >div {
            margin: 0 16px;
        }
    }
}

.fwzc {
    .tab {
        >div {
            margin: 0 16px;
        }
    }
}

.gywm {
    .tab {
        >div {
            margin: 0 16px;
        }
    }
}
</style>